<template>
    <div class="input-box">
      <input type="text" placeholder="输入任务名称" v-model="inputText"> <span @click="add">新增</span>
    </div>
  </template>
  
  <script setup>
  
  import {ref} from 'vue'
  
  //从对应store的文件中导入
  import { useTasklistStore } from '../stores/tasklist'
  import { useUserStore } from '../stores/user'
  import { useTokenStore } from '../stores/token'
  
  var inputText = ref('')
  
  //调用 useTasklistStore 方法 获取store对象
  var store = useTasklistStore()
  
  //调用 useUserStore 方法 获取store对象
  var userStore = useUserStore();
  
  //调用 useTokenStore 方法 获取store对象
  var tokenStore = useTokenStore();
  
  
  //新增任务
  var add = ()=>{
  
    store.addTask(inputText.value);//调用仓库中的方法addTask,新增任务
  
    inputText.value = '';
  }
</script>

<style scoped>
.input-box{
    display: flex;
    align-items: center;
    padding: 10px;
}
.input-box input{
    height: 40px;
    flex: 1;
    border: 1px solid #ccc;
    outline: none;
    padding-left: 20px;
    border-radius: 5px;
}
.input-box span{
    width: 80px;
    display: inline-block;
    text-align: center;
    line-height: 4px;
    color: rgb(33,146,216);
}
</style>